<template>
    <div class="content">
        <div class="top">
            <ul>
                <li>
                    <SelectIpt :lists="comoplainteType" ref="comoplainteType">
                        <p>类型</p>
                    </SelectIpt>
                </li>
                <li>
                    <SelectIpt :lists="complaintsSate" ref="complaintsSate">
                        <p>状态</p>
                    </SelectIpt>
                </li>
                <li>
                    <BlueBtn @click.native="search">查询</BlueBtn>
                </li>
            </ul>
        </div>
        <div class="table">
            <template>
                <el-table :data="complaintsData.slice(pages, pages + 10)" border style="width: 100%">
                    <el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop"
                        :label="column.label" :width="column.width || null">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="lookIntro(scope.$index, scope.row)">{{
                                scope.row.ComplaintsState == '未处理' ? '处理' :
                                    '详情' }}</el-button>
                            <el-button size="mini" type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <div class="total-page">
                        <p>共<span>{{ Math.ceil(complaintsData.length / 8) }}</span>页/<span>{{ complaintsData.length
                                }}</span>条数据
                        </p>
                    </div>
                    <el-pagination background layout="prev, pager, next,jumper" @current-change="getPage" :page-size=10
                        :current-page.sync=page :total="complaintsData.length" hide-on-single-page>
                    </el-pagination>
                </div>
            </template>
        </div>
        <!--查看详情对话框  -->
        <el-dialog title="提示" :visible.sync="introDialog" width="40%" :before-close="introClose" class="introDialog">
            <el-form ref="form" :model="introForm" :inline="true" label-width="100px" :rules="rules">
                <el-form-item label="投诉类型" prop="type">
                    <el-input disabled v-model="introForm.type"></el-input>
                </el-form-item>
                <el-form-item label="问题描述" prop="desc">
                    <el-input disabled v-model="introForm.desc"></el-input>
                </el-form-item>
                <el-form-item label="投诉人姓名" prop="name">
                    <el-input disabled v-model="introForm.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input disabled v-model="introForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="提交时间" prop="date">
                    <el-input disabled v-model="introForm.date"></el-input>
                </el-form-item>
                <el-form-item label="处理状态" prop="state">
                    <el-select v-model="introForm.state" placeholder="请选择处理状态">
                        <el-option value="未处理"></el-option>
                        <el-option value="处理中"></el-option>
                        <el-option value="已处理"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('form')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import BlueBtn from '@/components/BlueBtn.vue';
import SelectIpt from '@/components/SelectIpt.vue';
export default {
    components: {
        BlueBtn,
        SelectIpt
    },
    data() {
        return {
            introForm: {
                name: '',
                type: "",
                desc: '',
                phone: "",
                date: '',
                state: '',
                index: '',
                id: ''
            },
            rules: {

                // name: [
                //     {
                //         required: true, message: "请输入验证码", trigger: 'blur'
                //     }
                // ],
                // type: [
                //     {
                //         required: true, message: "请输入验证码", trigger: 'blur'
                //     }
                // ],
                // desc: [
                //     {
                //         required: true, message: "请输入验证码", trigger: 'blur'
                //     }
                // ],
                // phone: [
                //     {
                //         required: true, message: "请输入验证码", trigger: 'blur'
                //     }
                // ],
                // date: [
                //     {
                //         required: true, message: "请输入验证码", trigger: 'blur'
                //     }
                // ],
                state: [
                    {
                        required: true, message: "请输入验证码", trigger: 'blur'
                    }
                ],
            },
            introDialog: false,
            //搜索内容的数据
            comoplainteType: ['小区环境', '物业服务', '房屋质量', '电梯问题', '停车问题', '网络问题', '安全问题', '公共设施'],
            complaintsSate: ['未处理', '处理中', '已处理'],
            //数据库返回的数据
            complaintsData: [],
            tableColumns: [
                { prop: 'ComplaintsType', label: '投诉类型', width: 200 },
                { prop: 'ComplaintsIntro', label: '问题描述', width: 200 },
                { prop: 'ComplaintsState', label: '投诉状态', width: 200 },
                { prop: 'Owner', label: '投诉人姓名', width: 200 },
                { prop: 'Phone', label: '投诉人电话', width: 200 },
                { prop: 'ComplaintsDate', label: '投诉日期', width: 200 },
                { prop: 'DisposeDate', label: '处理日期', width: 200 },
            ],
            //当前
            page: 1,
            //page
            pages: 0,
            //接口返回的数据
            complaintsAllData: []
        }
    },
    methods: {
        //请求接口修改处理状态
        updateState(id,state) {
            this.$axios.post('http://127.0.0.1/complaints/updateState', {
              id,
              state
            },{
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                }
            }).then(res => {
                this.$message({
                    message: '修改成功',
                    type: 'success',
                    center: true
                });
                this.introDialog=false
            }).catch(err => {
                console.log(err);
            })
        },
        lookIntro(index, row) {
            this.introForm.name = row.Owner
            this.introForm.type = row.ComplaintsType
            this.introForm.desc = row.ComplaintsIntro
            this.introForm.phone = row.Phone
            this.introForm.date = row.ComplaintsDate
            this.introForm.state = row.ComplaintsState
            this.introForm.index = index + this.pages
            this.introForm.id = row.ID
            this.introDialog = true
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.complaintsData[this.introForm.index].ComplaintsState != this.introForm.state) {
                        this.complaintsData[this.introForm.index].ComplaintsState = this.introForm.state
                        this.updateState(this.introForm.id,this.introForm.state)
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        introClose() {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.introDialog = false
                })
                .catch(_ => { });
        },
        //点击查询按钮
        search() {
            this.pages = 0
            this.page = 0
            const serach = {}
            if (this.$refs.comoplainteType.value) {
                serach.complainteType = this.$refs.comoplainteType.value
            }
            if (this.$refs.complaintsSate.value) {
                serach.complaintsSate = this.$refs.complaintsSate.value
            }
            this.complaintsData = this.complaintsAllData.filter(item => {
                // 检查Status是否匹配
                if (serach.complainteType && item.ComplaintsType !== serach.complainteType) {
                    return false; // 如果不匹配，则排除该房间
                }
                // 检查Building是否匹配
                if (serach.complaintsSate && item.ComplaintsSate !== serach.complaintsSate) {
                    return false; // 如果不匹配，则排除该房间
                }
                // 如果所有条件都匹配或为空（表示用户没有为该字段指定筛选条件），则返回true以包含该房间
                return true;

            })
        },
        //get 当前页
        getPage(page) {
            this.pages = 10 * (page - 1)
        },
    },
    mounted() {
        fetch('http://127.0.0.1/complaints/all', {
            method: 'GET', // 请求方法
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('token')}`,
                'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
            }
        }).then(res => res.json()).then(res1 => {
            this.complaintsData = res1
            this.complaintsAllData = res1
        }).catch(err => {
            console.log(err);
        })
    }
}
</script>

<style scoped>
.introDialog>>>.el-input {
    width: 200px;
}

.introDialog>>>.el-dialog__body {
    padding: 30px 50px;
}

.table>>>.el-table {
    min-height: 580px;
}

.page {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-top: 20px;
}

.page>>>button {
    min-width: 35px !important;
    height: 25px;
    line-height: 25px;
    border-radius: 3px !important;
    border: 1px solid rgba(215, 215, 215, 1);
    background: #fff !important;
}

.page>>>.active {
    border-color: rgba(26, 135, 254, 1) !important;
    background-color: rgba(26, 135, 254, 1) !important;
    color: #fff !important;
}

.page>>>.el-pager li {
    min-width: 35px !important;
    height: 25px;
    line-height: 25px;
    border-radius: 3px !important;
    border: 1px solid rgba(215, 215, 215, 1);
    font-size: 12px;
    color: #999;
    font-weight: normal !important;
    background: #fff;
}

.total-page span {
    color: #FF3C2C;
}

.total-page {
    font-size: 12px;
    color: #666;
}

.table>>>.cell {
    text-align: center;
}

.table {
    padding: 20px 20px 50px;
    background: #fff;
    border-radius: 4px;
    margin-top: 10px;
}

.top ul {
    display: flex;


}

.top {
    background: #fff;
    padding: 20px 35px;
    border-radius: 4px;

}

.top li {
    margin-right: 50px;

    white-space: nowrap;
    font-size: 13px;
    color: #666;
}
</style>